<script setup>
import { usePersistStore, useDeskStore } from "@/stores";
import { onBeforeMount, onMounted } from "vue";
import * as echarts from "echarts";
import { storeToRefs } from "pinia";
import "@/assets/china";
const persistStore = usePersistStore();
const deskStore = useDeskStore();
const { overviewData } = storeToRefs(persistStore);
const { barOption, mapOption } = storeToRefs(deskStore);
const { getOverview, getYearData, getLocationData } = deskStore;

//页面加载时直接开始渲染图表
onMounted(async () => {
  await getOverview();
  await getYearData();
  await getLocationData();
  //渲染条形统计图
  const myBarChart = echarts.init(document.getElementById("box1"));
  myBarChart.setOption(barOption.value);
  //渲染地图
  const chinaMap = echarts.init(document.getElementById("chinaMap"));
  chinaMap.setOption(mapOption.value);
  if (window.location.href.indexOf("#reloaded") == -1) {
    window.location.href = window.location.href + "#reloaded";
    window.location.reload();
  }
});
</script>

<template>
  <section>
    <el-container>
      <el-header>烟料数据可视化智慧屏</el-header>
      <el-container>
        <el-aside>
          <div>
            <table border="1">
              <th colspan="4">库存数据概览</th>
              <tr>
                <td>年份分布</td>
                <td>国内产地</td>
                <!-- <td>国外产地</td> -->
                <td>种类个数</td>
                <td>备料个数</td>
              </tr>
              <tr>
                <td>{{ overviewData.year }}</td>
                <td>{{ overviewData.location }}</td>
                <td>{{ overviewData.categories }}</td>
                <td>{{ overviewData.extra }}</td>
              </tr>
            </table>
          </div>
          <div>
            <h3>单料烟年份数据</h3>
            <div id="box1"></div>
          </div>
        </el-aside>
        <el-main id="chinaMap"></el-main>
      </el-container>
    </el-container>
  </section>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/dataBg.png");
  background-size: cover;
  color: white;
}
.el-header {
  background-color: rgba(0, 0, 255, 0.2);
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  width: 100%;
  font-size: 0.375rem;
  letter-spacing: 0.25rem;
}

.el-aside {
  width: 10rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.el-aside div:first-child {
  width: 100%;
  height: 2.5rem;
}
div:first-child table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
div:first-child table th,
div:first-child table tr {
  height: 0.625rem;
  line-height: 0.625rem;
}
div:first-child table th {
  font-size: 0.375rem;
  letter-spacing: 0.25rem;
}
div:first-child table tr {
  font-size: 0.25rem;
}
.el-aside div:last-child {
  width: 100%;
  height: 7rem;
  border: 0.0125rem solid rgba(0, 0, 255, 0.2);
  overflow: hidden;
}
.el-aside div:last-child h3 {
  height: 0.625rem;
  line-height: 0.625rem;
  font-size: 0.375rem;
  letter-spacing: 0.25rem;
  text-align: center;
}
#box1 {
  width: 100%;
  height: 6rem;
}
.el-main {
  width: 10rem;
  height: 100%;
  overflow: hidden;
}
</style>
